<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>

    <link rel="stylesheet" href="../../static/css/index.css">
    <link rel="stylesheet" href="../../static/eui/element-ui.css">

    <script src="../../static/js/vue.min.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/eui/index.js"></script>

    <script src="../../static/js/App.js"></script>
    <script src="../../static/js/auth.js"></script>
    <script src="../../static/js/checkIsLogin.js"></script>
    <script src="../../static/js/FormBoxComponent.js"></script>
    <script src="../../static/js/DataListComponent.js"></script>
    <script src="../../static/js/RefreshComponent.js"></script>

    <link rel="stylesheet" href="../../static/css/template.css">
</head>
<body>
<div id="app">
    <refresh-comm></refresh-comm>

    <!--引用form-box-comm组件-->
    <form-box-comm ref="myForm"
                   :form-type="0"
                   :box-title="boxTitle"
                   :add-api-url="url+'/register'"
                   :edit-api-url="url"
                   :model="model"
                   :id-key="model.id"
                   :on-validate="formValidateHandler"
                   :on-success="successHandler">

        <!--添加自己的元素-->
        <template>
            <div class="item">
                <label for="name">用户名称：</label>
                <input id="name" v-model="model.name">
            </div>

            <div class="item">
                <label for="passw">用户密码：</label>
                <input type="password" id="passw" v-model="model.passw">
                <span>初始密码：000000</span>
            </div>

            <div class="item">
                <label for="des">说明：</label>
                <input id="des" v-model="model.des">
            </div>

        </template>
        <!--添加自己的元素 结束-->
    </form-box-comm>

    <!--引用data-list-comm组件-->
    <data-list-comm ref="myList"
                    :list-api-url="url+'/search'"
                    :delete-api-url="url"
                    :model-attr="modelAttr"
                    row-id-key="userId"
                    :on-add-new-form="onAddNewFormHandler"
                    :on-edit-form="onEditFormHandler"></data-list-comm>

</div>
<script>

    let vue = new Vue({
        el: "#app",
        data: {
            boxTitle: '新增用户信息',
            url: global_api_url + "user",
            //用户测试密码
            defaultPassWord: '000000',

            //表单的对象
            // 表单的对象不一定和列表表单字段一样，所以单独定义
            model: {
                id: null,
                name: null,
                passw: this.defaultPassWord,
                des: null
            },

            //列表的表单头，支持的定义格式如下：
            modelAttr: [
                {
                    display: '编码',
                    attribute: 'userId'
                },
                {
                    display: '用户名称',
                    attribute: 'userName'
                },
                {
                    display: '描述',
                    attribute: 'description'
                }]
        },
        created() {

        },
        methods: {
            /**
             * 挂载表单保存数据前，验证方法
             * 这个方法必须有true/false返回值
             */
            formValidateHandler(model) {
                //console.log(model);
                if (model.name != null && model.name != "") {
                    return true;
                } else {
                    alert("请输入用户名称！");
                    return false;
                }
            },

            /**
             * 数据保存成功后执行
             */
            successHandler(data) {
                //console.log(data);
                this.$refs.myList.getModelList();
                this.$refs.myForm.closeForm();
            },

            /**
             * 挂载新建表单方法
             */
            onAddNewFormHandler() {
                //恢复原样
                this.model = {};
                this.model.passw = this.defaultPassWord;
                //打开窗口
                this.$refs.myForm.showForm();
                this.boxTitle = '新增用户信息';
            },

            /**
             * 挂载获得编辑表单方法
             */
            onEditFormHandler(item) {
                //打开窗口
                this.$refs.myForm.showForm();
                this.boxTitle = `正在修改[${item.userName}]`;
                //赋值
                this.model.id = item.userId;
                this.model.name = item.userName;
                //不允许在这里修改密码
                this.model.passw = null;
                this.model.des = item.description;
            },
        }
    });

</script>
</body>
</html>